<template>
  <el-dialog :title="isAdd?'新增权限':'编辑权限'" :visible="value" width="500px" @close="close">
    <el-form ref="form" :model="permissionData" :rules="rules">
      <el-form-item label="组织名" label-width="100px" prop="name">
        <el-input v-model="permissionData.name" placeholder="请输入内容" size="small" /></el-form-item>

      <el-form-item label="标识" label-width="100px" prop="code">
        <el-input v-model="permissionData.code" placeholder="请输入内容" size="small" /></el-form-item>

      <el-form-item label="描述" label-width="100px" prop="description">
        <el-input v-model="permissionData.description" placeholder="请输入内容" size="small" />
      </el-form-item>

      <el-form-item label="是否开启权限" label-width="100px">
        <el-switch
          v-model="permissionData.enVisible"
          active-value="1"
          inactive-value="0"
          active-color="#13ce66"
        />
      </el-form-item>

      <el-form-item>
        <el-row type="flex" justify="center">
          <el-button @click="btnOK">确定</el-button>
          <el-button @click="close">取消</el-button>
        </el-row>
      </el-form-item>

    </el-form>
  </el-dialog>
</template>
<script>
import { setNewPermission, getByIdPermission, updataPermission } from '@/api/permission'
export default {
    props: {
        value: {
            type: Boolean,
            default: false
        },
        addObj: {
            type: Object,
            default: null
        },
        updataId: {
            type: Number,
            default: -1
        },
        isAdd: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            permissionData: {
                name: '', // 名称（填）
                code: '', // 标识（填）
                description: '', // 描述（填）
                type: 0, // 层级
                pid: 0, // 父级id
                enVisible: '0' // 权限开启状态（填）
            },
            rules: {
                // 校验规则数组
                name: [
                    // required 必填，message 错误提示，trigger 触发条件blur，失去焦点验证
                    {
                        required: true,
                        message: '必须写name',
                        trigger: 'blur'
                    }
                ],
                code: [
                    {
                        required: true,
                        message: '必须写标识',
                        trigger: 'blur'
                    }
                ],
                description: [
                    {
                        required: true,
                        message: '必须写描述',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    async created() {
    },
    methods: {
        // 点击确定开启校验和调用接口
        btnOK() {
            //  提交数据，校验
            this.$refs.form.validate(async isRes => {
                if (isRes) {
                    if (this.updataId !== -1) {
                        // 调取修改接口
                        await updataPermission(this.permissionData)
                        this.$emit('update:isAdd', true)
                        this.$emit('update:updataId', -1)
                        this.$message.success('修改成功')
                    } else {
                        await setNewPermission({
                            ...this.permissionData,
                            ...this.addObj
                        })
                        this.$message.success('新填成功')
                    }

                    // 关闭和清空弹框
                    this.close()
                }
            })
        },
        // 关闭弹框的函数
        close() {
            this.permissionData = this.$options.data().permissionData
            this.$emit('update:isAdd', true)

            this.$emit('update:updataId', -1)
            this.$emit('input', false)
            this.$refs.form.resetFields()
            // 提示父组件刷新
            this.$emit('refresh')
        },
        // 修改的函数还真只能由父组件来调用
        // 以为父组件创建的时候，就会触发子组件的 create 函数
        async updataThisData() {
            this.permissionData = {
                ...await getByIdPermission(this.updataId)
            }
        }
    }
}
</script>
